<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>computed 选项</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>computed 选项</h1>
    <a href="../index.html">返回</a>
    <hr />
    <div id="app">
        {{message}}
        <hr />
        {{displayprice}}
        <hr />
        <ul>
            <li v-for="(item,index) in disnew">
                {{index}} -- {{item.title}} == {{item.time}}
            </li>
        </ul>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello world",
                price: 100,
                newlist: [
                    { title: "这个是新闻1", time: '2018-9-1 12：12' },
                    { title: "这个是新闻2", time: '2018-9-2 10：12' },
                    { title: "这个是新闻3", time: '2018-9-13 10：12' }
                ]
            },
            computed: {
                displayprice: function () {
                    return "￥" + this.price + " 元"
                },
                disnew: function () {
                    return this.newlist.reverse();
                }

            }
        })
    </script>
</body>

</html>